<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="h-24 bg-white shadow-sm fixed w-full z-50 flex items-center justify-between px-8">
      <div class="flex items-center gap-8">
        <!-- EduLiveLink Logo -->
        <div class="flex items-center gap-4 bg-slate-800 px-5 py-3 rounded-lg">
          <div class="logo-icon w-12 h-12">
            <svg viewBox="0 0 100 100" fill="none">
              <circle cx="50" cy="50" r="45" stroke="url(#gradient1)" stroke-width="3" fill="none"/>
              <circle cx="50" cy="50" r="35" stroke="url(#gradient2)" stroke-width="2" fill="none"/>
              <path d="M30 40 L50 30 L70 40 L70 60 L50 70 L30 60 Z" fill="url(#gradient3)" opacity="0.8"/>
              <circle cx="50" cy="50" r="8" fill="white"/>
              <defs>
                <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2"/>
                  <stop offset="100%" style="stop-color:#7BB3F0"/>
                </linearGradient>
                <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#5BA0F2"/>
                  <stop offset="100%" style="stop-color:#8CC8FF"/>
                </linearGradient>
                <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#4A90E2"/>
                  <stop offset="100%" style="stop-color:#6BB0FF"/>
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div class="flex flex-col">
            <span class="text-xl font-bold text-blue-600">
              EduLiveLink
            </span>
            <span class="text-xs text-black">
              智能教育平台
            </span>
          </div>
        </div>
        
        <div class="flex gap-8">
          <router-link to="/home" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">首页</router-link>
          <router-link to="/courses" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">课程</router-link>
          <router-link to="/classes" class="text-blue-600 font-semibold text-base">班级管理</router-link>
          <router-link to="/student-classes" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">我的班级</router-link>
          <router-link to="/resources" class="text-gray-600 hover:text-blue-600 transition-colors text-base font-medium">资源</router-link>
        </div>
      </div>
      <div class="flex items-center gap-4">
        <el-button type="primary" size="default" class="rounded px-6 font-medium" @click="goHome">返回首页</el-button>
      </div>
    </nav>

    <!-- 上方空白区域 -->
    <div class="h-32 bg-white"></div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-8 py-8">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">班级管理功能演示</h1>
        <p class="text-xl text-gray-600">体验完整的班级管理解决方案</p>
      </div>

      <!-- 功能卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <!-- 教师/管理员端 -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
          <div class="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
            <el-icon class="text-white text-6xl"><School /></el-icon>
          </div>
          <div class="p-8">
            <h3 class="text-2xl font-bold mb-4 text-gray-900">教师/管理员端</h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              完整的班级管理功能，包括创建、编辑、删除班级，管理学生，导出数据等。
            </p>
            <div class="space-y-3 mb-6">
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>班级列表管理</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>搜索和筛选</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>批量操作</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>数据导出</span>
              </div>
            </div>
            <router-link to="/classes">
              <el-button type="primary" size="large" class="w-full">
                进入班级管理
              </el-button>
            </router-link>
          </div>
        </div>

        <!-- 学生端 -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
          <div class="h-48 bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center">
            <el-icon class="text-white text-6xl"><User /></el-icon>
          </div>
          <div class="p-8">
            <h3 class="text-2xl font-bold mb-4 text-gray-900">学生端</h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              便捷的班级加入功能，支持通过班级ID或邀请码申请加入，查看申请状态等。
            </p>
            <div class="space-y-3 mb-6">
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>查看已加入班级</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>申请加入新班级</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>班级ID/邀请码</span>
              </div>
              <div class="flex items-center gap-3 text-sm text-gray-700">
                <el-icon class="text-green-500"><Check /></el-icon>
                <span>申请记录管理</span>
              </div>
            </div>
            <router-link to="/student-classes">
              <el-button type="success" size="large" class="w-full">
                进入我的班级
              </el-button>
            </router-link>
          </div>
        </div>
      </div>

      <!-- 特色功能展示 -->
      <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-8 mb-8">
        <h3 class="text-2xl font-bold mb-6 text-gray-900 text-center">特色功能</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="text-center">
            <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-blue-600 text-2xl"><Key /></el-icon>
            </div>
            <h4 class="text-lg font-semibold mb-2">双加入方式</h4>
            <p class="text-gray-600 text-sm">支持班级ID和邀请码两种方式加入班级</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-green-600 text-2xl"><Search /></el-icon>
            </div>
            <h4 class="text-lg font-semibold mb-2">智能搜索</h4>
            <p class="text-gray-600 text-sm">强大的搜索和筛选功能，快速找到目标班级</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <el-icon class="text-purple-600 text-2xl"><Download /></el-icon>
            </div>
            <h4 class="text-lg font-semibold mb-2">数据导出</h4>
            <p class="text-gray-600 text-sm">支持导出班级数据，便于数据分析和备份</p>
          </div>
        </div>
      </div>

      <!-- 快速体验 -->
      <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-8 text-white text-center">
        <h3 class="text-2xl font-bold mb-4">立即体验</h3>
        <p class="text-blue-100 mb-6">点击下方按钮快速体验班级管理功能</p>
        <div class="flex gap-4 justify-center">
          <router-link to="/classes">
            <el-button type="primary" size="large" class="bg-white text-blue-600 border-white hover:bg-gray-50">
              班级管理演示
            </el-button>
          </router-link>
          <router-link to="/student-classes">
            <el-button size="large" class="bg-transparent text-white border-white hover:bg-white hover:text-blue-600">
              学生端演示
            </el-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { School, User, Key, Search, Download, Check } from '@element-plus/icons-vue'

const goHome = () => {
  window.location.href = '/home'
}
</script>

<style scoped>
.logo-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.logo-icon svg {
  width: 100%;
  height: 100%;
}
</style>




